<template>
  <div>
      <div class="tab">
        <Button class="tab-item"  v-for="(item, index) in demo_tablist" :key="index" :class="{isactive: isActive == index}" @click="tabToggle(index)">{{item.name}}</Button> 
      </div>
    
      <swiper @on-index-change="demo01_onIndexChange" v-model="demo01_index">
          <swiper-item class="swiper-demo-img" v-for="(item, index) in demo_tablist" :key="index">
            <scroller lock-x height="200px" @on-scroll-bottom="onScrollBottom" ref="scrollerBottom" :scroll-bottom-offst="200">
              <div class="box" >
                <p class="box-item" v-for="i in bottomCount">{{i}} {{item.name}}</p>
                <load-more tip="loading"></load-more>
              </div>
            </scroller> 
          </swiper-item>
      </swiper> 

      <!-- 自定义的左右滑动事件  如果运行下面这段代码 左右滑动和滚动内容会有冲突  打开style中 box的样式-->
        <!-- <scroller lock-x height="200px" @on-scroll-bottom="onScrollBottom" ref="scrollerBottom" :scroll-bottom-offst="200">
          <div class="box" v-swipeleft="{fn:leftTouch,name:'左滑'}" v-swiperight="{fn:righttouch,name:'右滑'}">
            <p class="box-item" v-for="(i,index) in bottomCount" :key="index">placeholder {{i}}</p>
            <load-more tip="loading"></load-more>
          </div>
        </scroller>  -->

  </div>
</template>

<script>
import { Swiper,SwiperItem, Scroller, LoadMore } from 'vux'
const baseList = [
    {
        url: 'javascript:',
        title: '1'
    }, {
        url: 'javascript:',
        title: '2'
    }, {
        url: 'javascript:',
        title: '3',
    },{
        url: 'javascript:',
        title: '4',
    },{
        url: 'javascript:',
        title: '5',
    }
]

export default {
  components: {
    Swiper,
     Scroller,
    LoadMore,
    SwiperItem
  },
  data () {
    return {
      demo01_list: baseList,
      demo01_index: 0,
      demo_tablist: [{
          id: 1,
          name: '星期一'
      },{
          id: 2,
          name: '星期二'
      },{
          id: 3,
          name: '星期三'
      },{
          id: 4,
          name: '星期四'
      },{
          id: 5,
          name: '星期五'
      }],
      showList1: true,
      scrollTop: 0,
      onFetching: false,
      bottomCount: 20,
      isActive: 0
    }
  },
  mounted() {
    //  this.$nextTick(() => {
    //   this.$refs.scrollerEvent.reset({top: 0})
    // })
    // this.$nextTick(() => {
    //   this.$refs.scrollerBottom.reset({top: 0})
    // })
  },
  methods: {
    // tab切换标示
    tabToggle (index) {
      // 通过索引来改变内容切换
      this.demo01_index = index
      // 通过索引来改变tab标示
      this.isActive = index
    },
    demo01_onIndexChange (index) {
      // 左右切换来改变tab文字切换
      this.isActive = index
    },
    onScrollBottom () {
      if (this.onFetching) {
        // do nothing
      } else {
        this.onFetching = true
        setTimeout(() => {
          this.bottomCount += 10
          this.$nextTick(() => {
            this.$refs.scrollerBottom.reset()
          })
          this.onFetching = false
        }, 2000)
      }
    },
    onScroll (pos) {
      this.scrollTop = pos.top
    },
    onCellClick () {
      window.alert('cell click')
    },
    onClickButton () {
      window.alert('click')
    },
    changeList () {
      this.showList1 = false
      this.$nextTick(() => {
        this.$refs.scroller.reset({
          top: 0
        })
      })
    },
    // 左滑事件
    leftTouch () {
        console.log('左滑事件')
    },
    righttouch () {
        console.log('右滑事件')
    }
  }
}
</script>

<style>
.tab {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}
.box1 {
  height: 100px;
  position: relative;
  width: 1490px;
}
.box1-item {
  width: 200px;
  height: 100px;
  background-color: #ccc;
  display:inline-block;
  margin-left: 15px;
  float: left;
  text-align: center;
  line-height: 100px;
}
.box1-item:first-child {
  margin-left: 0;
}
.box2-wrap {
  height: 300px;
  overflow: hidden;
}
.vux-indicator {
  display: none;
}
.vux-slider {
  width: 100%;
}
.vux-swiper {
  height: 100%;
  background-color: red;
}
.vux-swiper-item > div {
  overflow: visible!important;
}
.isactive {
  color: red;
}
.box-item {
  text-align: center;
}

/* 如果左滑与右滑与上下滚动有冲突 可以吧touch-action: none; 设置在滚动的父元素上 ok */
/* .box {
  touch-action: none;
} */
</style>